<template>
  <div class="report-container">
    <!-- 标题区域 -->
    <header class="report-header">
      <h1>演练评估报告</h1>
      <p class="sub-title">靶场环境：包含SQL注入、XSS、CSRF和SSRF四种漏洞的Web应用靶场</p>
    </header>

    <!-- 能力雷达图区域 -->
    <section class="radar-section">
      <h2>能力评估雷达图</h2>
      <div class="radar-chart">
        <div class="radar-item">
          <span class="radar-label">漏洞识别能力</span>
          <span class="stars">★★★☆☆</span>
        </div>
        <div class="radar-item">
          <span class="radar-label">漏洞利用技术</span>
          <span class="stars">★☆☆☆☆</span>
        </div>
        <div class="radar-item">
          <span class="radar-label">防御方案设计</span>
          <span class="stars">★★☆☆☆</span>
        </div>
        <div class="radar-item">
          <span class="radar-label">响应速度</span>
          <span class="stars">★★☆☆☆</span>
        </div>
        <div class="radar-item">
          <span class="radar-label">工具熟练度</span>
          <span class="stars">★★★☆☆</span>
        </div>
      </div>
    </section>

    <!-- 技能画像区域 -->
    <section class="skill-profile">
      <h2>技能画像</h2>
      <div class="skill-tags">
        <span class="skill-tag">漏洞识别能力</span>
        <span class="skill-tag">漏洞利用技术</span>
        <span class="skill-tag">工具熟练度</span>
        <span class="skill-tag">防御方案设计</span>
        <span class="skill-tag">响应速度</span>
      </div>
      <!-- 技能画像雷达图 -->
      <div ref="skillChart" class="skill-chart-container"></div>
    </section>

    <!-- 漏洞评估详情 -->
    <section class="vulnerability-assessment">
      <h2>漏洞评估详情</h2>

      <!-- SQL注入评估 -->
      <div class="vulnerability-item">
        <h3>1. SQL注入(SQLi)评估</h3>
        <div class="finding-section">
          <h4>发现情况：</h4>
          <ul class="findings-list">
            <li>未能识别出用户登录表单的SQL注入点</li>
            <li>未尝试使用' OR '1'='1等基础注入payload</li>
          </ul>
        </div>
      </div>

      <!-- XSS评估 -->
      <div class="vulnerability-item">
        <h3>2. XSS(跨站脚本攻击)评估</h3>
        <div class="finding-section">
          <h4>发现情况：</h4>
          <ul class="findings-list">
            <li>未测试搜索框和评论区的XSS可能性</li>
            <li>未尝试任何XSS payload</li>
          </ul>
        </div>
      </div>

      <!-- CSRF评估 -->
      <div class="vulnerability-item">
        <h3>3. CSRF(跨站请求伪造)评估</h3>
        <div class="finding-section">
          <h4>发现情况：</h4>
          <ul class="findings-list">
            <li>未识别出密码修改功能的CSRF漏洞</li>
            <li>未尝试构造CSRF攻击页面</li>
          </ul>
        </div>
      </div>

      <!-- SSRF评估 -->
      <div class="vulnerability-item">
        <h3>4. SSRF(服务端请求伪造)评估</h3>
        <div class="finding-section">
          <h4>发现情况：</h4>
          <ul class="findings-list">
            <li>未测试URL参数可能的SSRF漏洞</li>
            <li>未尝试访问内部服务(如169.254.169.254)</li>
          </ul>
        </div>
      </div>
    </section>

    <!-- 学习计划 -->
    <section class="learning-plan">
      <h2>学习计划</h2>
      <div class="plan-table">
        <table>
          <thead>
          <tr>
            <th>周次</th>
            <th>重点领域</th>
            <th>学习内容</th>
            <th>实践任务</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>1</td>
            <td>SQL注入</td>
            <td>
              <ul>
                <li>注入原理（拼接/报错/盲注）</li>
                <li>Union查询构造</li>
                <li>布尔/时间盲注技巧</li>
                <li>SQLmap工具基础</li>
              </ul>
            </td>
            <td>
              <ul>
                <li>使用DVWA完成SQL注入挑战（Low→High难度）</li>
                <li>手工注入闯关：Web for Pentester SQLi LAB</li>
              </ul>
            </td>
          </tr>
          <tr>
            <td>2</td>
            <td>XSS</td>
            <td>
              <ul>
                <li>反射型/存储型/DOM型区别</li>
                <li>常用payload构造</li>
                <li>BeEF框架使用</li>
                <li>CSP绕过技巧</li>
              </ul>
            </td>
            <td>
              <ul>
                <li>XSS Game全关卡通关</li>
                <li>在DVWA中实现：
                  <ul>
                    <li>弹窗攻击</li>
                    <li>Cookie窃取</li>
                    <li>键盘记录</li>
                  </ul>
                </li>
              </ul>
            </td>
          </tr>
          <tr>
            <td>3</td>
            <td>CSRF</td>
            <td>
              <ul>
                <li>CSRF工作原理</li>
                <li>Token生成/验证机制</li>
                <li>SameSite Cookie策略</li>
                <li>同源策略绕过</li>
              </ul>
            </td>
            <td>
              <ul>
                <li>手工构造CSRF攻击页面攻破DVWA</li>
                <li>使用Burp Suite生成CSRF PoC并测试防护有效性</li>
              </ul>
            </td>
          </tr>
          <tr>
            <td>4</td>
            <td>SSRF</td>
            <td>
              <ul>
                <li>云元数据API利用（AWS/Azure）</li>
                <li>协议处理差异（file://, gopher://）</li>
                <li>DNS重绑定技术</li>
              </ul>
            </td>
            <td>
              <ul>
                <li>利用SSRF读取AWS元数据</li>
                <li>在实验环境中：
                  <ul>
                    <li>访问内网服务</li>
                    <li>读取本地文件</li>
                  </ul>
                </li>
              </ul>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </section>
  </div>
</template>

<script>
// 假设已通过npm安装echarts：npm install echarts --save
import * as echarts from 'echarts'

export default {
  name: 'VulnerabilityReport',
  mounted() {
    // 初始化技能画像雷达图
    const chart = echarts.init(this.$refs.skillChart)

    // 根据文档中的星级评分设置雷达图数据（五星对应100分，一星对应20分）
    chart.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}分'
      },
      radar: {
        indicator: [
          { name: '漏洞识别能力', max: 100 },
          { name: '漏洞利用技术', max: 100 },
          { name: '防御方案设计', max: 100 },
          { name: '响应速度', max: 100 },
          { name: '工具熟练度', max: 100 }
        ],
        splitArea: {
          areaStyle: {
            color: ['rgba(255,255,255,0.3)']
          }
        },
        axisLine: {
          lineStyle: {
            color: '#666'
          }
        }
      },
      series: [{
        name: '技能评分',
        type: 'radar',
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          width: 3
        },
        areaStyle: {
          color: 'rgba(52, 152, 219, 0.3)'
        },
        data: [
          {
            value: [60, 20, 40, 40, 60], // 对应文档中的三星、一星、二星、二星、三星
            name: '当前水平',
            itemStyle: {
              color: '#3498db'
            }
          }
        ]
      }]
    })

    // 监听窗口大小变化，自动调整图表尺寸
    window.addEventListener('resize', () => {
      chart.resize()
    })
  },

}
</script>

<style scoped>
.report-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.report-header {
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 2px solid #333;
}

.sub-title {
  font-size: 1.2em;
  color: #666;
}

.radar-section, .skill-profile, .vulnerability-assessment, .learning-plan {
  margin-bottom: 40px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

h2 {
  color: #2c3e50;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-top: 0;
}

.radar-chart {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
}

.radar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
}

.radar-label {
  font-weight: bold;
  width: 120px;
}

.stars {
  color: #f1c40f;
  font-size: 1.2em;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.skill-tag {
  background-color: #3498db;
  color: white;
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 0.9em;
}

/* 技能画像雷达图容器样式 */
.skill-chart-container {
  width: 100%;
  height: 400px;
  margin: 0 auto;
  max-width: 600px;
}

.vulnerability-item {
  margin-bottom: 30px;
  padding: 15px;
  background-color: white;
  border-radius: 6px;
}

.findings-list {
  list-style-type: disc;
  padding-left: 20px;
}

.plan-table {
  overflow-x: auto;
  margin-top: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
}

th, td {
  padding: 12px;
  border: 1px solid #ddd;
  vertical-align: top;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

td ul {
  margin: 0;
  padding-left: 20px;
}

td ul li {
  margin-bottom: 5px;
}

td ul li ul {
  padding-left: 20px;
  margin-top: 5px;
}
</style>
